<template>
    <div class="route">
    
    
    
        <div class="nav">
    
            <ul>
    
                <p class="nav_text">奥德健身蜗牛旗舰店</p>
    
                <li>
    
                    <div class="nav_top" v-for="(item,index) in most" :key="index" :class="{ haha:changeRed == index}" @click="change(index)">
    
                        <img :src="item.image" alt="">
    
                        <span>{{item.text}}</span>
    
                    </div>
    
                     <!-- <div class="nav_class" @click.stop="mould($event)">管理课程模版</div> -->
    
                </li>
    
    
    
    
    
            </ul>
    
    
    
        </div>
    
        <router-view></router-view>
    
    
    
    
    
    </div>
</template>
<script>
    export default {
    
        data() {
    
            return {
    
                most: [{
    
                        image: require('../assets/images/route/route_06.png'),
    
                        text: '场馆管理'
    
                    },
    
                    {
    
                        image: require('../assets/images/route/route_08.png'),
    
                        text: '会员管理'
    
                    },
    
                    {
    
                        image: require('../assets/images/route/route_11.png'),
    
                        text: '课程管理',
    
                    },
    
                    {
    
                        image: require('../assets/images/route/route_14.png'),
    
                        text: '预约管理'
    
                    },
    
                ],
    
                changeRed: '',
    
                navActive: false
    
            }
    
        },
    
        created() {
    
    
    
        },
    
        methods: {
    
            change(index) {
    
                this.changeRed = index;
    
                if (this.changeRed == '0') {
    
                    // console.log(111)
    
                    this.$router.push({
    
                        path: '/fontline_management',
    
                        query: {
    
    
    
                        }
    
                    })
    
    
    
                } else if (this.changeRed == '1') {
    
                    this.$router.push({
    
                        path: '/desk_member',
    
                        query: {
    
    
    
                        }
    
                    })
    
    
    
                } else if (this.changeRed == '2') {
    
                    this.$router.push({
    
                        path: '/desk_course',
    
                        query: {
    
    
    
                        }
    
                    })
    
    
    
                } else if (this.changeRed == '3') {
    
                    this.$router.push({
    
                        path: '/desk_reservation',
    
                        query: {
    
    
    
                        }
    
                    })
    
    
    
                }
    
            },
    
            //  mould(e) {
    
            //     e.target.style.backgroundColor = "#dee1e7";
    
            //     e.target.style.borderLeft = "4px solid #2575ff";
    
            //     this.$router.push({
    
            //         path: '/masterPlate',
    
            //         query: {
    
    
    
            //         }
    
            //     })
    
    
    
    
    
            // }
    
    
    
    
    
    
        }
    
    }
</script>
<style scoped>
    .route {
    
        width: 100%;
    
        height: 100%;
    
        background: #fff;
    
        position: fixed;
    
        left: 0;
    
        top: 0;
    
    }
    
    
    
    .nav {
    
        width: 250px;
    
        height: 100%;
    
    }
    
    
    
    .nav ul {
    
        width: 100%;
    
        position: relative;
    
    }
    
    
    
    .nav ul .nav_text {
    
        width: 100%;
    
        height: 100px;
    
        line-height: 100px;
    
        text-align: center;
    
        font-size: 18px;
    
        color: #000000;
    
        font-family: '微软雅黑';
    
        font-weight: bold;
    
    }
    
    
    
    .nav ul li {
    
        width: 100%;
    
        /* height: 50px;
    
        line-height: 50px; */
    
    }
    
      /* .nav ul li .nav_top:nth-child(4) {
    
        margin-top: 50px;
    
    }
     */
    
    
    .nav ul li .nav_top {
    
        width: 100%;
    
        height: 50px;
    
        line-height: 50px;
    
        padding-left: 20%;
    
        display: flex;
    
        align-items: center;
    
    }
    
    
    
    .nav ul li .nav_top img {
    
        display: inline-block;
    
        width: 16px;
    
        height: 16px;
    
    }
    
    
    
    .nav ul li .nav_top span {
    
        display: inline-block;
    
        padding-left: 7px;
    
        font-size: 14px;
    
        color: #606060;
    
        padding-top: 3px;
    
    }
    
    
    
    .haha {
    
        background: #dee1e7;
    
        border-left: 4px solid #2575ff;
    
        padding-left: 35%!important;
    
        text-align: center!important;
    
        color: #000;
    
    }
    
    
    
    .haha span {
    
        color: #000!important;
    
        font-weight: bold!important;
    
    }
    
      /* .nav ul li .nav_class {
    
        width: 100%;
    
        height: 50px;
    
        line-height: 50px;
    
        text-align: center;
    
        font-size: 14px;
    
        color: #000;
    
        font-weight: bold;
    
        position: absolute;
    
        left: 0;
    
        top:250px;
    
        z-index: 6
    
    } */
</style>


